@import url('../../../less/base.less');
.city-select{
  display: flex;
  justify-content:space-around;
  display: -webkit-flex;
  -webkit-justify-content: space-around;
  border-bottom: 1px solid @cell-border-color;
  width: 90%;
  margin: 0 auto;
  .departure-city{
    text-align: left;
  }
  .arrival-city{
    text-align: right;
  }
  .departure-city,.arrival-city{
    display: flex;
    display: -webkit-flex;
    width: 40%;
    .location{
      line-height: 40px;
      width: 100%;
      padding-top: 8px;
      p{
        color: #2A2A2A;
      }
      p.unactive{
        color:#7F7F7F;
      }
      .fromCity,.toCity{
        font-size: 20px;
      }
    }
    .entrance-icon{
      img{
        vertical-align: top;
        margin-top: 20px;
      }
    }
    p{
      margin: 5px 0
    }
    strong{
      font-size: 18px;
    }
  }
  .switch-city{
    width: 20%;
    height: 48px;
    line-height: 50px;
    position: relative;
    top: 10px;
    border-bottom: 1px solid #fff;
    .switch-icon{
      width: 36px;
      height: 36px;
      // background-color: @theme-color;
      display: inline-block;
      overflow: hidden;
      border-radius: 50%;
      vertical-align: middle;
      img{
        vertical-align: top;
        border-radius: 50%;
        display: inline-block;
        animation-duration:0.3s;
        animation-fill-mode:both
      }
    }
  }
}
.switch-right{
  -webkit-transform:translateX(220%);
  -ms-transform:translateX(220%);
  transform:translateX(220%);
  -webkit-transition-duration:230ms;
  -moz-transition-duration:230ms;
  transition-duration:230ms;
  opacity: 0.8;
}
.switch-left{
  -webkit-transform:translateX(-220%);
  -ms-transform:translateX(-220%);
  transform:translateX(-220%);
  -webkit-transition-duration:230ms;
  -moz-transition-duration:230ms;
  transition-duration:230ms;
  opacity: 0.8;
}